<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<cu-custom bgColor="bg-black" :isBack="true">
			<block slot="right">
				<view class="action">
					公开：<switch class='black radius' @change="SwitchPublic" :class="isPublic?'checked':''" :checked="isPublic?true:false"></switch>
				</view>
				<view class="action">
					<button class="cu-btn round bg-white" @tap="submit">发布</button>
				</view>
			</block>
		</cu-custom>
		<textarea maxlength="-1" :disabled="modalName!=null" @input="diaryInput" :value="diary" placeholder="开始写日记吧!" style="margin-top: 0px;"></textarea>

		<!-- 退出登录 -->
		<view class="cu-modal" :class="showdraft?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">有未写完的草稿</view>
					<view class="action" @tap="cancle">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					需要重新载入吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-black" @tap="cancle">取消</button>
						<button class="cu-btn bg-red margin-left" @tap="sure">确定</button>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				showdraft: false,
				titleHeight: 0, //状态栏和导航栏的总高度
				statusBarHeight: 0, //状态栏高度
				naviBarHeight: 0, //导航栏高度
				modalName: null,
				isPublic: true,
				diary: "",
				userInfo: {
					ext_info: {
						yesapi_avatar: "",
						yesapi_email: "",
						yesapi_expiration_time: "",
						yesapi_mobile: "",
						yesapi_nickname: "",
						yesapi_points: 0,
						yesapi_real_name: "",
						yesapi_reg_note: "",
						yesapi_reg_source: "",
						yesapi_sex: ""
					},
					register_ip: "",
					register_time: "",
					role: "",
					rolename: "",
					status: 0,
					username: "",
					uuid: "",
					token: ""
				},
				isRotate: false //是否加载旋转

			}
		},
		onLoad() {
			const res = uni.getSystemInfoSync()
			const system = res.platform
			this.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				this.titleHeight = (50 + this.statusBarHeight)
			} else if (system === 'ios') {
				this.titleHeight = (45 + this.statusBarHeight)
			}
			this.naviBarHeight = this.titleHeight - this.statusBarHeight
		},
		mounted() {
			var loginres = this.checkLogin("/pages/write/write", '1');
			this.userInfo = loginres
			let draft = uni.getStorageSync('draft');
			if (draft == '') {
				this.showdraft = false;
			} else {
				this.showdraft = true;
			}
		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin'])
		},

		watch: {
			hasLogin: function(val) {
				if (!val) {
					this.checkLogin("/pages/write/write", '1')
				}

			}
		},
		methods: {
			...mapMutations(['login']),
			cancle() {
				uni.setStorageSync('draft', '');
				this.showdraft = false;
			},
			sure() {
				this.diary = uni.getStorageSync('draft');
				uni.setStorageSync('draft', '');
				this.showdraft = false;
			},
			diaryInput(e) {
				this.diary = e.detail.value
				uni.setStorageSync('draft', e.detail.value);
			},
			SwitchPublic(e) {
				this.isPublic = e.detail.value
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			async submit() {
				//登录
				let access_value = 2;
				if (this.isRotate) {
					return false;
				}
				if (this.diary.length == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '写点什么吧'
					});
					return;
				}

				this.isRotate = true
				setTimeout(function() {
					this.isRotate = false
				}, 3000)
				uni.showLoading({
					title: '提交中...'
				});
				if (this.isPublic == true) {
					access_value = 0;
				}

				var options = {
					data: {
						s: "SVIP.Szskj_MyApi.ACreateOkayapimoment",
						uuid: this.userInfo.uuid,
						moment_nickname: this.userInfo.ext_info.yesapi_nickname,
						moment_content: this.diary,
						moment_access: access_value
					},
					method: "POST"
				}
				const res = await this.$myRuquest(options)
				if (res.data.data.err_code == 0) {
					this.userInfo.ext_info.yesapi_points = res.data.data.err_code.yesapi_points
					this.login(this.userInfo)
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '发表成功'
					});
					uni.setStorageSync('draft', '');
					this.$store.commit("setData", {
						key: "tabpage",
						val: 'home'
					});
					uni.reLaunch({
						url: "/pages/index"
					});

				} else {
					uni.showToast({
						icon: '',
						position: 'bottom',
						title: '发表失败'
					});
					uni.reLaunch({
						url: "/pages/index"
					});

				}

			}

		}
	}
</script>

<style>
	page {
		background: #444444;
		height: 100vh;
	}

	textarea {
		display: flex;
		background-color: #444444;
		color: #fff;
		padding-left: 15rpx;
		flex: 1;
		height: 50vh;
		margin-top: 20rpx;
		width: 100%;

	}
</style>
